<template>
  <div style="height: 650px;">
  <keep-alive>
    <div >
      <component :is="list[productStore.productId]" :curId="productStore.productId"
        :formDataListIndex="formDataListIndex" @changeCurId="
          (val: number) => {
            productStore.productId = val
          }
        " @formDataListIndex="
        (val: number) => {
          formDataListIndex = val
        }
      ">
      </component>
    </div>
  </keep-alive>
  </div>
</template>
<script lang="ts" setup>
import { ref, type Ref } from 'vue'
import ProductChildA from './ProductChildA.vue'
import ProductChildB from './ProductChildB.vue'
import { useProductStore } from '@/stores/ProductStore'
const productStore = useProductStore()
const list = [ProductChildA, ProductChildB]
const formDataListIndex = ref<number>(0)
// const curId: Ref<number> = ref(0)
console.log(productStore.productId)
</script>

<style lang="scss" scoped></style>
